import React, { Component } from 'react';
import p1 from '../../images/k_pro5.png';
class View extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render(){
        const person = {
            name:'小王',
            age:'20'
        }
        let bTrue = true;
        let ifHtml = '';
        if(!bTrue){
            ifHtml = '<div>如果在jsx 中使用if,</div>';
        }else{
            ifHtml = '<div>如果在jsx 中使用if else</div>';
        }
        const myStyle = {
            fontSize: '12px',
            color: '#FF0000'
        };
        const arr = [
          <h2>React教程</h2>,
          <h3>需要不停的写代码</h3>,
        ];
        const listItems = arr.map((tag,i) =>
          <li key={i}>{tag}</li>
        );
        return (
            <React.Fragment>
                <div className="my_className">这是jsx</div>
                <img className="img1" src={p1} alt="这是图片的引入方式"/>
                <h2>你的姓名是：{person.name}，年龄是：{person.age}</h2>
                {bTrue?<div>这是t</div>:<div>这是f</div>}
                {ifHtml}
                <div dangerouslySetInnerHTML={{ __html: ifHtml }}></div>
                <div style={myStyle}>这是style</div>
                {/*<div className="my_className">这里的代码要被注释掉</div>*/}
                <ol>{listItems}</ol>
            </React.Fragment>
        )
        /*
            1、className
            2、表达img
            3、{person.name}
            4、jsx 中使用if
            5、如何在jsx中使用html 片段
            6、注释
            7、html数组写入
        **/
    }
}
export default View;
